<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--    使用组件 直接写组件名称标签-->
    <school></school>
    <hr/>
    <student></student>
    <hr/>
    <hello></hello>
</div>
<div id="root2">
    <!--    使用组件 直接写组件名称标签-->
    <hello></hello>
</div>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;
    //全局注册组件 组件名 组件的位置


    const hello = Vue.extend({
        data() {
            return {
                hello: '你好'
            }
        },
        template: `
          <div>
          <h1>{{ hello }}</h1>
          </div>
        `
    });
    //注意：创建一定要在注册的前面！！！！(注册组件)
    Vue.component('hello',hello);

    //定义组件 传入的对象和new Vue()中的对象差不多
    const school = Vue.extend({
        //注意不要配置el 组件不会对单独的容器使用 而且这里的data要用函数式 作用:一个页面对其数据的修改 不会影响到其他的页面
        data() {
            return {
                schoolName: '尚硅谷',
                address: '北京昌平'
            }
        },
        //定义组件的时候要定义使用模板 要用模板字符串 主要模板的最外面要加 div标签
        template: `
          <div>
          <h2>学校名称:{{ schoolName }}</h2>
          <h2>学校地址:{{ address }}</h2>
          </div>
        `
    });
    const student = Vue.extend({
        //注意不要配置el 组件不会对单独的容器使用
        data() {
            return {
                studentName: '张三',
                age: 18
            }
        },
        //定义组件的时候要定义使用模板 要用模板字符串 主要模板的最外面要加 div标签
        template: `
          <div>
          <h2>学生名字:{{ studentName }}</h2>
          <h2>学生年龄:{{ age }}</h2>
          </div>
        `
    });

    //注册组件(局部注册)
    new Vue({
        el: '#root',
        components: {
            // 组件的真实名字 组件的对象 如果两个名字相同 直接写一个名字即可
            school: school,
            student: student
        }
    });

    new Vue({
        el:'#root2'
    })

</script>
</body>
</html>